<template>
  <div class="disaster-recovery">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="title">灾备容灾</span>
        <el-button-group class="header-operations">
          <el-button type="primary" size="small" icon="el-icon-refresh" @click="refreshData">刷新</el-button>
          <el-button type="success" size="small" icon="el-icon-upload2" @click="initiateBackup">发起备份</el-button>
        </el-button-group>
      </div>

      <!-- Overview Cards -->
      <el-row :gutter="20" class="overview-row">
        <el-col :span="6">
          <el-card shadow="hover" class="overview-card">
            <div class="overview-content">
              <div class="overview-icon">
                <i class="el-icon-upload"></i>
              </div>
              <div class="overview-info">
                <div class="overview-label">上次备份时间</div>
                <div class="overview-value">{{ overview.lastBackupTime }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="overview-card">
            <div class="overview-content">
              <div class="overview-icon">
                <i class="el-icon-time"></i>
              </div>
              <div class="overview-info">
                <div class="overview-label">RPO</div>
                <div class="overview-value">{{ overview.rpo }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="overview-card">
            <div class="overview-content">
              <div class="overview-icon">
                <i class="el-icon-alarm-clock"></i>
              </div>
              <div class="overview-info">
                <div class="overview-label">RTO</div>
                <div class="overview-value">{{ overview.rto }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="overview-card">
            <div class="overview-content">
              <div class="overview-icon">
                <i class="el-icon-success"></i>
              </div>
              <div class="overview-info">
                <div class="overview-label">备份成功率</div>
                <div class="overview-value">{{ overview.successRate }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- Backup Servers Table -->
      <el-table
        :data="backupServers"
        style="width: 100%"
        v-loading="loading"
        @current-change="handleCurrentChange"
        highlight-current-row
      >
        <el-table-column prop="name" label="服务器名称" min-width="180"></el-table-column>
        <el-table-column prop="ip" label="IP地址" min-width="140"></el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="lastBackup" label="上次备份" min-width="160"></el-table-column>
        <el-table-column prop="nextBackup" label="下次备份" min-width="160"></el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template slot-scope="scope">
            <el-button @click="backupNow(scope.row)" type="text" size="small">立即备份</el-button>
            <el-button @click="restoreBackup(scope.row)" type="text" size="small">恢复</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- Pagination -->
      <div class="pagination-wrapper">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
    <el-card class="box-card">
      <!-- Backup Details -->
      <div class="box-card backup-details" style="margin-top: 20px;">
<!--        <div slot="header" class="clearfix">-->
<!--          <span>备份详情</span>-->
<!--&lt;!&ndash;          <el-select v-model="selectedServerId" placeholder="选择服务器" style="float: right; width: 200px;">&ndash;&gt;-->
<!--&lt;!&ndash;            <el-option&ndash;&gt;-->
<!--&lt;!&ndash;              v-for="server in backupServers"&ndash;&gt;-->
<!--&lt;!&ndash;              :key="server.id"&ndash;&gt;-->
<!--&lt;!&ndash;              :label="server.name"&ndash;&gt;-->
<!--&lt;!&ndash;              :value="server.id">&ndash;&gt;-->
<!--&lt;!&ndash;            </el-option>&ndash;&gt;-->
<!--&lt;!&ndash;          </el-select>&ndash;&gt;-->
<!--        </div>-->
        <h4 style="margin-top: 20px;">备份详情</h4>
        <div v-if="selectedServer">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="服务器名称">{{ selectedServer.name }}</el-descriptions-item>
            <el-descriptions-item label="IP地址">{{ selectedServer.ip }}</el-descriptions-item>
            <el-descriptions-item label="状态">
              <el-tag :type="getStatusType(selectedServer.status)">{{ selectedServer.status }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="上次备份">{{ selectedServer.lastBackup }}</el-descriptions-item>
            <el-descriptions-item label="下次备份">{{ selectedServer.nextBackup }}</el-descriptions-item>
            <el-descriptions-item label="总备份大小">{{ selectedServer.totalBackupSize }}</el-descriptions-item>
          </el-descriptions>

          <h4 style="margin-top: 20px;">备份历史</h4>
          <el-table
            :data="selectedServer.backupHistory"
            style="width: 100%"
          >
            <el-table-column prop="timestamp" label="备份时间" width="180"></el-table-column>
            <el-table-column prop="type" label="备份类型" width="100"></el-table-column>
            <el-table-column prop="status" label="状态" width="100">
              <template slot-scope="scope">
                <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="size" label="备份大小" width="120"></el-table-column>
            <el-table-column prop="duration" label="耗时" width="120"></el-table-column>
            <el-table-column prop="details" label="详情" min-width="200"></el-table-column>
          </el-table>
        </div>
        <div v-else class="empty-details">
          请选择一个服务器查看详细信息
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'DisasterRecovery',
  data() {
    return {
      loading: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      selectedServerId: null,
      overview: {
        lastBackupTime: '2024-04-27 23:45:00',
        rpo: '4小时',
        rto: '2小时',
        successRate: '99.9%'
      },
      backupServers: [
        { id: 1, name: '主数据库服务器', ip: '192.168.1.10', status: '正常', lastBackup: '2024-04-27 23:45:00', nextBackup: '2024-04-28 03:45:00', totalBackupSize: '2.5TB' },
        { id: 2, name: '应用服务器1', ip: '192.168.1.11', status: '正常', lastBackup: '2024-04-27 22:30:00', nextBackup: '2024-04-28 02:30:00', totalBackupSize: '500GB' },
        { id: 3, name: '文件服务器', ip: '192.168.1.12', status: '警告', lastBackup: '2024-04-27 21:15:00', nextBackup: '2024-04-28 01:15:00', totalBackupSize: '1.8TB' },
      ]
    }
  },
  computed: {
    selectedServer() {
      return this.backupServers.find(server => server.id === this.selectedServerId);
    }
  },
  methods: {
    getStatusType(status) {
      const types = {
        '正常': 'success',
        '警告': 'warning',
        '错误': 'danger',
        '成功': 'success'
      };
      return types[status] || 'info';
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.refreshData();
    },
    refreshData() {
      this.loading = true;
      // 模拟API调用
      setTimeout(() => {
        this.loading = false;
        this.$message.success('数据已刷新');
      }, 1000);
    },
    initiateBackup() {
      this.$confirm('确定要为所有服务器发起备份吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '备份任务已启动'
        });
      }).catch(() => {});
    },
    backupNow(server) {
      this.$confirm(`确定要立即备份服务器 ${server.name} 吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: `服务器 ${server.name} 的备份任务已启动`
        });
      }).catch(() => {});
    },
    restoreBackup(server) {
      this.$confirm(`确定要恢复服务器 ${server.name} 的最新备份吗？`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: `服务器 ${server.name} 的恢复任务已启动`
        });
      }).catch(() => {});
    },
    handleCurrentChange(currentRow) {
      if (currentRow) {
        this.selectedServerId = currentRow.id;
      }
    }
  },
  watch: {
    selectedServerId: {
      immediate: true,
      handler(newVal) {
        if (newVal) {
          // 模拟API调用获取服务器详细信息
          setTimeout(() => {
            const server = this.backupServers.find(s => s.id === newVal);
            if (server) {
              server.backupHistory = [
                { timestamp: '2024-04-27 23:45:00', type: '完全', status: '成功', size: '500GB', duration: '45分钟', details: '完全备份' },
                { timestamp: '2024-04-26 23:45:00', type: '增量', status: '成功', size: '50GB', duration: '10分钟', details: '增量备份' },
                { timestamp: '2024-04-25 23:45:00', type: '完全', status: '警告', size: '495GB', duration: '50分钟', details: '完全备份，有1个文件无法访问' },
                { timestamp: '2024-04-24 23:45:00', type: '增量', status: '成功', size: '30GB', duration: '8分钟', details: '增量备份' },
                { timestamp: '2024-04-23 23:45:00', type: '增量', status: '成功', size: '45GB', duration: '12分钟', details: '增量备份' }
              ];
            }
          }, 500);
        }
      }
    }
  }
}
</script>

<style scoped>
.disaster-recovery {
  padding: 8px;
}

.box-card {
  margin-bottom: 10px;
}

.header-operations {
  float: right;
}

.overview-row {
  margin-bottom: 20px;
}

.overview-card {
  height: 100px;
}

.overview-content {
  display: flex;
  align-items: center;
  height: 100%;
}

.overview-icon {
  font-size: 32px;
  margin-right: 15px;
  color: #409EFF;
}

.overview-info {
  display: flex;
  flex-direction: column;
}

.overview-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 5px;
}
.pagination-wrapper {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
.overview-value {
  font-size: 20px;
  font-weight: bold;
  color: #303133;
}

.backup-details {
  margin-top: 20px;
}

.empty-details {
  text-align: center;
  padding: 20px;
  color: #909399;
  font-size: 14px;
}

@media (max-width: 768px) {
  .header-operations {
    float: none;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
  }

  .overview-row {
    .el-col {
      margin-bottom: 10px;
    }
  }

  .backup-details .el-select {
    float: none;
    width: 100%;
    margin-top: 10px;
  }
}
</style>
